<template>
    <div class="cls1" ref="chartSC"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, useTemplateRef, ref } from 'vue';
  // 不同价位的销售量
  import request from '../axios/request'
  import axios from 'axios'
  const chartSC = ref()

  function chartsInit(data) {
      var x = [];
      var y= [];
      
      for (var i = 0; i < data.length; i++) {
          x.push(data[i].name);
          y.push(data[i].total_demand);
      }
      
      var myChart = echarts.init(chartSC.value, 'Light');
      var option;
     
      option = {
        title: {
  text: '不同价格需求量柱状图',
  textStyle: {
    color: '#90E2FF',
    fontSize: 18,
    textAlign: 'center'
  },
  left: 'center',
  bottom: '3%'
},
        grid: {
            left: '10%',
            right: '10%',
            bottom: '20%',
            top: '10%',
            containLabel: true,
            width: '80%', /* 增大grid的width属性值，可根据实际情况调整占比 */
            height: '75%' /* 增大grid的height属性值，可根据实际情况调整占比 */
        },
  xAxis: {
    type: 'category',
    data: x,
    axisLabel: {
        rotate: 45,  // 旋转标签以节省空间
        interval: 0   // 显示所有标签，不跳过任何一个
      }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: y,
      type: 'bar'
    }
  ]
};

      option && myChart.setOption(option);
  }
  
  //组件挂载成功
  onMounted(function () {
      
      axios.get('/produce-api/queryAllpricetb').then(res => {

          chartsInit(res.data.data)
      }).catch((error) =>
          console.log(error))
  })
  
  </script>
  <style scoped>
  .cls1{
    width: 100%;
    height: 100%;
  }
  </style>